<template>
	<div class="index">
	   <div class="banner">
	   	<img src="../assets/index/index_10.jpg" alt="" />
	   </div>
	   <!--选择内容-->
	   <div class="chose">
	   	<div class="dh">
	   		<div class="m_list">
	   			<ul>
	   				<li><img src="../assets/index/index_13.png" alt="" /><span>院校推荐</span></li>
	   				<li><img src="../assets/index/index_15.png" alt="" /><span>专业推荐</span></li>
	   				<li><img src="../assets/index/index_17.png" alt="" /><span>分数线预测</span></li>
	   				<li><img src="../assets/index/index_19.png" alt="" /><span>专家一对一</span></li>
	   			</ul>
	   		</div>
	   	</div>
	   </div>
	   <!--测试-->
	  <div class="mit">
	  	<div class="mit_title">性格测试 + 智能推荐 = 选择更好的志愿</div>
	  	<div class="mit_logo">
	  		<div class="mit_sex"><img src="../assets/index/index_26.jpg" alt="" /></div>
	  		<div style="width:10%;"></div>
	  		<div class="mit_int"><img src="../assets/index/index_28.jpg" alt="" /></div>
	  	</div>
	  	<!--查询-->
	  	<div class="query">
	  	<div class="s_query">
	  		<div class="inputField" v-on:click="addList()">{{adindex}}&nbsp&nbsp{{adname}}
	  		<div class="chose_class" v-show="addressPanel">
	  			<ol>
	  				<li v-for="list in addressList" v-on:click="choseAddress(list.name,list.index)"><span>{{list.index}}&nbsp&nbsp{{list.name}}</span></li>
	  			</ol>
	  		</div>
	  		</div>
	  		<div class="inputField"   v-on:click="choseList()" ><span>{{course}}</span>
	  			<div class="ul_panel"  v-show="ulPanel">
	  				<ol  >
	  					<li v-for="list in classeslist" v-on:click="courseChose(list.name,list.value)"><span>{{list.name}}</span></li>
	  				</ol>
	  			</div>
	  		</div>
	  		
	  		<div class="inputFeild-group">
	  			
	  			<input type="text" name="" placeholder="预估分数 "  />
	  		</div>
	  		<div class="inputbutton">开始推荐</div>
	  	</div>
	  </div>
	  </div>
	  <!--院校搜索-->
	  <div class="s_school">
	  	<div class="search_input">
	  		<img src="../assets/index/index_search_03.png" alt=""  class="search_b"/>
	  		<input type="text" name="search" placeholder="清华大学" />
	  		<div class="f_btn">院校搜索</div>
	  	</div>
	  	<!--推荐院校-->
	  	<div class="recom">
	  		<div class="recom_title">
	  			<p class="recom-left">开始推荐</p><p class="recom-right"><img src="../assets/index/recome_03.png" alt="" /></p>
	  		</div>
	  		<!--学校列表-->
	  		<div class="recom_school">
	  			<ul>
	  				<li>
	  					<div class="s_logo">
	  						<img src="../assets/index/s-logo_07.png" alt="" />
	  					</div>
	  					<div class="s_intr">
	  						<p class="x_title">北京师范大学</p>
	  						<p class="s_title">北京/师范类</p>
	  					</div>
	  				</li>
	  				<li class="list_two">
	  					<div class="s_logo">
	  						<img src="../assets/index/s-logo_07.png" alt="" />
	  					</div>
	  					<div class="s_intr">
	  						<p class="x_title">北京师范大学</p>
	  						<p class="s_title">北京/师范类</p>
	  					</div>
	  				</li>
	  				<li class="list_three">
	  					<div class="s_logo">
	  						<img src="../assets/index/s-logo_07.png" alt="" />
	  					</div>
	  					<div class="s_intr">
	  						<p class="x_title">北京师范大学</p>
	  						<p class="s_title">北京/师范类</p>
	  					</div>
	  				</li>
	  				<li>
	  					<div class="s_logo">
	  						<img src="../assets/index/s-logo_07.png" alt="" />
	  					</div>
	  					<div class="s_intr">
	  						<p class="x_title">北京师范大学</p>
	  						<p class="s_title">北京/师范类</p>
	  					</div>
	  				</li>
	  			</ul>
	  		</div>
	  	</div>
	  </div>
	  
	  <!--专业搜索-->
	  <div class="s_professional">
	  	<div class="search_input">
	  		<img src="../assets/index/index_search_03.png" alt=""  class="search_b"/>
	  		<input type="text" name="search" placeholder="人工智能" />
	  		<div class="f_btn">专业搜索</div>
	  	</div>
	  	<!--推荐院校-->
	  	<div class="recom">
	  		<div class="recom_title">
	  			<p class="recom-left">开始推荐</p><p class="recom-right"><img src="../assets/index/recome_03.png" alt="" /></p>
	  		</div>
	  		<!--学校列表-->
	  		<div class="recom_school">
	  			<ul>
	  				<li>
	  					<div class="s_logo">
	  						<p class="s_time">毕业5年后月薪</p>
	  						<p class="s_money">￥&nbsp15000</p>
	  					</div>
	  					<div class="s_intr_ai">
	  						<p class="x_title">通信工程</p>
	  						<p class="s_title">电子/信息技术类</p>
	  					</div>
	  				</li>
	  				<li class="list_two">
	  					<div class="s_logo">
	  						<p class="s_time">毕业5年后月薪</p>
	  						<p class="s_money">￥&nbsp15000</p>
	  					</div>
	  					<div class="s_intr_ai">
	  						<p class="x_title">通信工程</p>
	  						<p class="s_title">电子/信息技术类</p>
	  					</div>
	  				</li>
	  				<li class="list_three">
	  					<div class="s_logo">
	  						<p class="s_time">毕业5年后月薪</p>
	  						<p class="s_money">￥&nbsp15000</p>
	  					</div>
	  					<div class="s_intr_ai">
	  						<p class="x_title">通信工程</p>
	  						<p class="s_title">电子/信息技术类</p>
	  					</div>
	  				</li>
	  				<li>
	  					<div class="s_logo">
	  						<p class="s_time">毕业5年后月薪</p>
	  						<p class="s_money">￥&nbsp15000</p>
	  					</div>
	  					<div class="s_intr_ai">
	  						<p class="x_title">通信工程</p>
	  						<p class="s_title">电子/信息技术类</p>
	  					</div>
	  				</li>
	  			</ul>
	  		</div>
	  	</div>
	  </div>  
	  <!--专家团队-->
	  <div class="experts">
	  	<div class="exper_team">
	  		<div class="team_title">专家团队</div>
	  		<div class="t_intr">
	  			<p>"每个人的个性、喜好和理想都不同，有了大数据，就可以根据不同人的需求，来提供不</p>	
	  			<p>同的决策。即为你量身打造你的未来。</p>
	  		</div>
	  		<div class="t_logo">
	  			<ul>
	  				<li>
	  					<div class="t_team"></div>
	  				</li>
	  				<li class="t_team_two">
	  					<div  class="t_team"></div>
	  				</li>
	  				<li class="t_team_three">
	  					<div  class="t_team"></div>
	  				</li>
	  				<li>
	  					<div  class="t_team"></div>
	  				</li>
	  			</ul>
	  		</div>
	  	</div>
	  </div>
	  
	  <!--高考咨询-->
	  <div class="consult">
	  	<div class="consult_team">
	  		<div class="team_title">高考资讯</div>
	  		<div class="c_intr">
	  				<span>院校资讯 | 备考经验 | 招生政策</span>
	  			     <img src="../assets/index/more_03.png" alt="" class="more"/>
	  		</div>
	  		<div class="c_list">
	  			<ul>
	  				<li>
	  					<div class="c_cert">
	  						<img src="../assets/index/index_33.png" alt="" />
	  						<div class="c_duce">
	  							<div class="c_duce_title"> 高考招生：三种途径辨别录取通知书真伪</div>
	  							<div class="c_duce_content">
	  								新华社成都7月1日电(记者某某某)近年来，在高考(精品课)招生录取中，伪造高校录取通知书
	  								成为不法分子惯用....
	  							</div>
	  							<div class="data">
	  								<p class="c_timer">2018-1-1</p>	<p class="c_find">阅读更多</p>
	  							</div>
	  						</div>
	  					</div>
	  				</li>
	  				<li class="c_data_two">
	  					<div class="c_cert">
	  						<img src="../assets/index/index_33.png" alt="" />
	  						<div class="c_duce">
	  							<div class="c_duce_title"> 高考招生：三种途径辨别录取通知书真伪</div>
	  							<div class="c_duce_content">
	  								新华社成都7月1日电(记者某某某)近年来，在高考(精品课)招生录取中，伪造高校录取通知书
	  								成为不法分子惯用....
	  							</div>
	  							<div class="data">
	  								<p class="c_timer">2018-1-1</p>	<p class="c_find">阅读更多</p>
	  							</div>
	  						</div>
	  					</div>
	  				</li>
	  				<li>
	  					<div class="c_cert">
	  						<img src="../assets/index/index_33.png" alt="" />
	  						<div class="c_duce">
	  							<div class="c_duce_title"> 高考招生：三种途径辨别录取通知书真伪</div>
	  							<div class="c_duce_content">
	  								新华社成都7月1日电(记者某某某)近年来，在高考(精品课)招生录取中，伪造高校录取通知书
	  								成为不法分子惯用....
	  							</div>
	  							<div class="data">
	  								<p class="c_timer">2018-1-1</p>	<p class="c_find">阅读更多</p>
	  							</div>
	  						</div>
	  					</div>
	  				</li>
	  			</ul>
	  		</div>
	  		
	  	</div>
	  </div>
	  
	  <!--视屏资讯-->
	  <div class="consult">
	  	<div class="consult_team">
	  		<div class="team_title">视频资讯</div>
	  		<div class="c_intr">
	  				<span>高考动态视频资讯</span>
	  			     <img src="../assets/index/more_03.png" alt="" class="more"/>
	  		</div>
	  		<div class="c_list">
	  		  <ul>
	  		  	<li v-on:click="onVideo()">
	  		  		<div class="c_video">
	  		  			<img src="../assets/index/video_07.png" alt="" />
	  		  		</div>
	  		  		<div class="c_video_title">
	  		  			<p class="v_nmae">视频标题</p>
	  		  			<p class="v_active">高考录取</p>
	  		  		</div>
	  		  	</li>
	  		  	<li class="c_video_two">
	  		  		<div class="c_video"><img src="../assets/index/video_07.png" alt="" /></div>
	  		  		<div class="c_video_title">
	  		  			<p class="v_nmae">视频标题</p>
	  		  			<p class="v_active">高考录取</p>
	  		  		</div>
	  		  	</li>
	  		  	<li>
	  		  		<div class="c_video"><img src="../assets/index/video_07.png" alt="" /></div>
	  		  		<div class="c_video_title">
	  		  			<p class="v_nmae">视频标题</p>
	  		  			<p class="v_active">高考录取</p>
	  		  		</div>
	  		  	</li>
	  		  </ul>
	  		 </div>
	  		</div>
	  	</div>
	  	<!--视频弹出层弹出层-->
	  	<div class="hide_video" v-show="video" >
	  		<i class="zm_close" v-on:click="closeVideo()">×</i>
	  		<div class="cont_video">
	  			<embed style="width:640px;height:400px;" wmode="window" src="" quality="high" name="iPIN_flash359877 id="" width="640" height="400"
               allowscriptaccess="always" allowfullscreeb="true" type="application/x-shockwave-flash"> 
	  		</div>
	  	</div>
	 <!--<router-link :to="{name: 'foot',params: { id: id ,name:name}}">foot</router-link> -->
	</div>
</template>

<script>
	export default{
		name:'index',
		data(){
			return{	
			 video:false,//视频播放器
			 ulPanel:false,// 查询文理科
			 course:'理科',
			 adindex:'s',  //地址选择
			 adname:'四川',  //地址选择
			 addressPanel:false,
			 classeslist:[
			  {name:'理科',value:1},
			  {name:'文科',value:2}
			 ],
			 addressList:[
			   {name:'北京',index:'b'},
			   {name:'上海',index:'s'},
			   {name:'广州',index:'g'},
			   
			 ]
			}
		},
		methods:{
			//播放视频
			onVideo:function(){
				this.video =true;
			},
			//关闭视频窗口
			closeVideo:function(){
				this.video = false;
			},
			//打开选择文理科面板
			choseList:function(){
				this.ulPanel = !this.ulPanel;
			},
		     //选择文理科
		     courseChose:function(name,index){
//		     	console.log(index,name)
		     	this.course = name;
		     },
		     //打开地址选择面板
		     addList:function(){
		     	this.addressPanel = !this.addressPanel;
		     },
		     //选择地址
		     choseAddress(name,index){
		     	console.log(name,index)
		     	this.adname = name;
		     	this.adindex = index;
		     }
		}
	}
</script>

<style>
	.banner{width:100%;overflow: hidden;}
	.banner img{width:100%;}
	.chose{width:100%;height:190px;background-color:#000000;overflow: hidden;}
	.index{margin-top:20px;}
	@media (min-width: 1024px){
		.dh{width:1260px;min-width:1024px;margin:0 auto;position: relative;overflow: hidden;}
		.m_list{width:100%;height:190px;overflow: hidden;}
		.m_list img{width:70px;height:50px;}
		.m_list li{float:left;list-style: none;width:25%;padding-top:85px;position: relative;cursor: pointer;}
		.m_list li span{color:#ffffff;display:inline-block;position: relative;left:15px;top:-25px;}
		.mit{background-color:#ededed;width:100%;}
		.mit_title{color:#171717;width:100%;text-align: center;padding-top:60px;font-size:22px;}
		.mit_logo{width:100%;padding-top:50px;display:flex;display: -webkit-box; 
display: -ms-flexbox; /* TWEENER - IE 10 */}
		.mit_sex{width:45%;text-align: right;}
		.mit_int{width:45%;text-align: left;}
		.query{width:100%;padding-top:60px;padding-bottom: 40px;;}
		.s_query{width:1260px;margin:0 auto;}
		.chose_class{position: absolute;width:160px;max-width:240px;z-index:100;left:0;overflow-y: auto;background:#ffffff;}
		.chose_class ol{border:1px solid #dddddd;border-top:none;}
		.inputField{position: relative;width:130px;background-color:#ffffff;cursor: pointer;
      display: inline-block;margin-right: 40px;padding: 0 15px; height: 45px;line-height: 45px;color: #333;text-align: left;vertical-align: middle}
	    .inputField .ul_panel{position: absolute;width:160px;max-width:240px;z-index:100;left:0;overflow-y: auto;background:#ffffff;}
	    .inputField .ul_panel ol{border:1px solid #dddddd;border-top:none;}
	    .inputFeild-group{display:inline-block;}
	    .inputFeild-group input{cursor:pointer;width:190px;outline:none;border:none;color:#dfdfdf;padding-left:10px;vertical-align: middle;height:45px;}
	    .inputbutton{display:inline-block;margin-left:100px;width:130px;height:45px;line-height: 45px;text-align: center;background-color:#259b24;color:#ffffff;
	      border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;cursor: pointer;
	    } 
	    .s_school{width:100%;padding-top:100px;position: relative;}
	    .s_professional{width:100%;padding-top:100px;position: relative;padding-bottom: 70px;;}
	    .search_input img{position: relative;left:40px;top:10px;cursor: pointer;}
	    .search_input input{min-width:460px;outline:none;height:50px;border:none; border:1px solid #bbbbbb;color:#bbbbbb;border-top-left-radius:3px ;
	   border-bottom-left-radius:3px ;
	     padding-left:50px;cursor: pointer;border-right:none;padding-right:0px;}
	    .f_btn{display:inline-block;width:170px;height:55px;text-align: center;background-color:#259b24;position: relative;
	    left:-5px;cursor: pointer;
	    line-height: 50px;color:#ffffff;font-size:18px;}
	    .recom{width:1260px;min-width: 1024px;margin:0 auto;padding-top:40px;overflow: hidden;}
	    .recom_title{width:100%;height:40px;border-bottom: 1px solid #bbbbbb;display:flex;display: -webkit-box; 
display: -ms-flexbox; /* TWEENER - IE 10 */}
	    .recom-left{width:50%;text-align: left;}
	    .recom-right{width:50%;position:relative;color:#259b24;}
	    .recom-right img{position: absolute;right:0;cursor: pointer;}
	    .recom_school{width:100%;padding-top:40px;overflow: hidden;}
	    .recom_school li{list-style: none;cursor: pointer;float:left;}
	    .recom_school .list_two{padding-left:140px;}
	    .recom_school .list_three{padding-left:135px;padding-right:135px;}
	    .s_logo{width:210px;height:210px;border:1px solid #bbbbbb;text-align: center;}
	    .s_logo img{margin-top:15px;}
	    .s_logo .s_time{text-align: center;margin-top:60px; font-size:14px;color:#161616;}
	     .s_logo .s_money{text-align: center;margin-top:55px;font-size:16px;font-weight: bold;color:#101010;}
	    .s_intr{width:212px; height:90px;background-color:#e51c23;color:#ffffff;text-align:  center;}
	    .s_intr .x_title{font-size:16px;padding-top:25px;}
	    .s_intr .s_title{font-size:12px;padding-top:15px;}
	    .s_intr_ai .x_title{font-size:16px;padding-top:25px;}
	    .s_intr_ai .s_title{font-size:12px;padding-top:15px;}
	    .s_intr_ai{width:212px; height:90px;background-color:#000033;color:#ffffff;text-align:  center;}
	    /*专家团队*/
	   .experts{width:100%;background-color:#efefef;position: relative;padding-bottom: 190px;}
	   .exper_team{width:1260px;min-width:1024px;padding-top:115px;margin:0 auto;}
	   .team_title{width:100%;text-align: center;font-size:18px;font-weight: 400;color:#171717;}
	   .t_intr{padding-top:45px;width: 100%;text-align: center;}
	   .t_intr p{font-size:14px; color:#797979;}
	   .t_logo{padding-top:75px;overflow: hidden;}
	   .t_logo li{list-style: none;float:left;cursor: pointer; }
	   .t_team{width:250px;height:250px;border-radius: 50%;background-color:#ffffff;}
	   .t_team_two{padding-left:85px;}
	   .t_team_three{padding-left:85px;padding-right:85px;}
	   /*高考资讯*/
	   .consult{width:100%;position: relative;}
	   .consult_team{padding-top:110px;width:1260px;min-width:1024px;margin:0 auto;}
	   .c_intr{padding-top:25px;text-align: center;width:100%;height:30px;font-size:12px;color:#797979;overflow: hidden;position: relative;}
	   .c_intr img{position:absolute;right:0;cursor: pointer;display:inline-block;}
	   .c_list{padding-top:40px;overflow: hidden;}
	   .c_list li{float:left;list-style: none;}
	   .c_list .c_cert{width:360px;height:420px;border:1px solid #bbbbbb;}
	   .c_list .c_cert img{width:100%;}
	   .c_duce{padding-top:30px;padding-left:20px;padding-right:10px;}
	   .c_duce .c_duce_title{font-size:14px;color:#ff7043;text-align: center;}
	   .c_duce_content{padding-right:15px;font-size:12px;padding-top:15px; color:#8a8a8a;text-overflow:ellipsis;padding-left:15px;}
	    .data{padding-top:15px;padding-left:15px;padding-right:15px;display:flex;display: -webkit-box; 
display: -ms-flexbox; /* TWEENER - IE 10 */}
	   .data .c_timer{font-size:12px;color:#313131;width:50%;text-align: left;;} 
	   .data .c_find{font-size:12px;color:#ff7043;width:50%;text-align: right;;cursor: pointer;}
	   .c_data_two{padding-left:85px;padding-right:85px;}
	   /*视频资讯*/
	  .c_video{width:360px;height:205px;border:1px solid #bbbbbb;}
	  .c_video img{width:100%;}
	   .c_list li{cursor: pointer;}
	  .c_video_two{padding-left:85px;padding-right:85px;}
	  .c_video_title{padding-top:25px;}
	  .c_video_title .v_nmae{font-size:12px;color:#ff7043;text-align:left;padding-bottom: 5px;}
	  .c_video_title .v_active{font-size:12px;color:#bbbbbb;text-align:left;}
	  /*视频弹出窗口*/
	  .hide_video{position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 10000; background: rgba(0, 0, 0, 0.498039);display: block;}
	  .zm_close{position: absolute;font-size: 45px;right: 100px;top: 100px; border-radius: 50%;border: 1px solid #aaa;width: 50px;height: 50px;text-align: center;line-height: 48px;cursor: pointer;color: #aaa;z-index: 1000;}
	  .cont_video{position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;margin: auto; width: 640px;height: 400px;}
	}
</style>